<script setup lang="ts">
import type { MirrorDataFilter } from "@/modules/dev-env/mirror/filter.ts";
import { onMounted, shallowRef } from "vue";
import type { DefaultOptionType } from "ant-design-vue/es/vc-select/Select";
import { useMitt } from "@/framework/util/events.ts";

defineOptions({ name: "install-mirror-filter" });

const { filter } = defineProps<{
  filter: MirrorDataFilter;
}>();

const options = shallowRef<DefaultOptionType[]>([]);

useMitt(filter.events, "data-source-change", async () => {
  options.value = await filter.getDataSource();
});

onMounted(async () => {
  options.value = await filter.getDataSource();
});
</script>

<template>
  <a-form-item :label="filter.name">
    <a-select v-bind="filter.selectProps" style="width: 180px" v-model:value="filter.value" :options="options" placeholder="请选择" />
  </a-form-item>
</template>

<style scoped lang="less"></style>
